<template>
    <div class="box_bg">
        <!-- 内容区域  开始 -->
        <div class="components_con">
            <!-- 查询开始 -->
            <div class="components_searchs" @keyup.enter="queryTable">
                <span class="tit">姓名：</span>
                <el-input v-model="table.queryParams.teacherName" auto-complete="off" placeholder="请输入姓名"></el-input>

                <span class="tit">月份：</span>
                <el-date-picker
                    v-model="table.queryParams.month"
                    type="month"
                    placeholder="请选择月份">
                </el-date-picker>

                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
            </div>
        </div>
        <!-- components_btns -->
        <div class="components_btns clearfix">
            <div class="fl">
                <el-button type="primary" v-has="'classperiod:generate'" size="mini" icon="el-icon-plus" @click="generate">生成上月课时</el-button>
                <el-button type="primary" v-has="'classperiod:export'" size="mini" @click="exportExcel">
                    <i class="iconfont icon-leading-iout"></i>
                    导出
                </el-button>
            </div>
        </div>
        <!-- components_btns -->
        <div class="scrollBarX">
            <vue-table
                :api-url="table.apiUrl"
                :fields="table.fields"
                :appendParams="table.queryParams"
                :content="self"
                ref="classPeriodTable">
            </vue-table>
        </div>
    </div>
</template>

<script>
    import { config } from '@/config'
    export default {
        components: {
        },
        data() {
            return {
                self: this,
                // 班级表格
                table: {
                    apiUrl: api.classperiod.queryList,
                    queryParams: {
                        teacherName: null,   //教材名称
                        month: null,   //专业组
                    },
                    fields: [{
                            prop: "teacherName",
                            label: "姓名",
                        },
                        {
                            prop: "month",
                            label: "月份",
                            formatter:function(row, column, cellValue){
                                return cellValue == null ? null : cellValue + "月";
                            }
                        },
                        {
                            prop: "classPeriod",
                            label: "课时数",
                        },
                    ],
                },
            };
        },
        created() {
        },
        mounted() {},
        computed:{},
        watch: {},
        methods: {
            // 生成数据
            generate() {
                let vm = this;
                vm.axios.get(api.classperiod.generate).then((response) => {
                    if (response.data.success) {
                        vm.$message({
                            message: response.data.msg,
                            type: 'success',
                        });
                        vm.$refs.classPeriodTable.$emit('vuetable:current-refresh')
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 导出excel
            exportExcel(){
               /*  let vm = this;
                let href = config.BASE_URL + api.courseBook.exportExcel;
                href += "?Authorization=" + localStorage.getItem("userToken");
                // 拼接条件
                for(let item in vm.table.queryParams){
                    // 为了0和false
                    if(vm.table.queryParams[item] != null && vm.table.queryParams[item] !== ""){
                        href += "&" + item + "=" + vm.table.queryParams[item];
                    }
                }

                window.location.href = href; */
            },
            // 打开新增培养方案dialog
            showAddDialog() {
                this.$refs.courseBookAdd.showDialog();
            },
            // 查询按钮
            queryTable() {
                this.$refs.classPeriodTable.$emit('vuetable:refresh')
            },
            // 重置
            reset(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.$refs.classPeriodTable.$emit('vuetable:refresh')
            },
        },
    };
</script>
<style scoped>
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
</style>


